<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        div{
            background-color: bisque;
        }

    </style>

    <script>
        function clicked() {
            alert("被点击")
            document.write("点击加入的元素---")
        }

        function clicked2() {
            var div1 = document.getElementById("div1")
            console.log(div1.innerText)

            var div2 = document.getElementsByClassName("div2")[0]
            console.log(div2.innerText)

            var username = document.getElementsByName("username")[0]
            console.log(username.value)
            console.log(username.valueOf())


        }
    </script>

</head>
<body>

<div id="div1">--div01--</div>
<div class="div2">--div02--</div>

<script>
    // document.write("通过document写入的数据-------")
</script>
<div>--div03--</div>

<script>
    // document.write("<div>--div4 我是通过document写入的元素--</div>")
</script>


<input type="text" name="username"><br>

<button onclick="clicked()">按钮</button><br>
<button onclick="clicked2()">dom操作元素</button>


</body>
</html>